import { Component, onMount } from "solid-js";
import Knot from "./knot";

const KnotBg: Component<{
  color?: string;
  size?: number;
  bg?: string;
  margin: number;
}> = ({ bg = "#ffffff", color = "#ff6348", size = 5, margin = 10 }) => {
  return (
    <div
      style={{ "background-color": bg, padding: `${margin}px` }}
      class="w-screen h-screen flex flex-col justify-between fixed z--1 top-0 left-0 right-0 bottom-0"
    >
      <div class="flex justify-between">
        <Knot
          size={size}
          styles={{ transform: "rotate(0deg)" }}
          id="lt"
          color={color}
        />
        <div
          style={{ "border-color": color, height: `${size * 2 + 2}px` }}
          class="w-full h-22px border-y-2 border-0 border-solid"
        />
        <Knot
          size={size}
          styles={{ transform: "rotate(90deg)" }}
          id="lb"
          color={color}
        />
      </div>
      <div class="flex justify-between w-full h-full">
        <div
          style={{ "border-color": color, width: `${size * 2 + 2}px` }}
          class="h-full border-x-2 border-0  border-solid"
        />
        <div
          style={{ "border-color": color, width: `${size * 2 + 2}px` }}
          class="h-full border-x-2 border-0  border-solid"
        />
      </div>
      <div class="flex justify-between items-end">
        <Knot
          size={size}
          styles={{ transform: "rotate(270deg)" }}
          id="rb"
          color={color}
        />
        <div
          style={{ "border-color": color, height: `${size * 2 + 2}px` }}
          class="w-full h-22px border-y-2 border-0 border-solid"
        />
        <Knot
          size={size}
          styles={{ transform: "rotate(180deg)" }}
          id="rt"
          color={color}
        />
      </div>
    </div>
  );
};

export default KnotBg;
